<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
				<!-- Buttons - Ref.: http://www.primefaces.org/showcase/ui/commandButton.jsf -->
				<p:commandButton id="bt" value="botao velho" ></p:commandButton>
				<p:commandButton id="bt1" value="Maj Ferrari" ></p:commandButton>
				<p:commandButton id="bt2" value="novo botao" ></p:commandButton>
				<!-- Fim Buttons -->
				
				<!-- InputText -->
				<p:inputText id="input" />
				
				  <!-- RadioButton - Ref.: http://www.primefaces.org/showcase/ui/selectOneRadio.jsf --> 
			      <p:selectOneRadio id="optionsRadio" >  
			          <f:selectItem itemLabel="Option 1" itemValue="1" />  
			          <f:selectItem itemLabel="Option 2" itemValue="2" />  
			          <f:selectItem itemLabel="Option 3" itemValue="3" />  
			      </p:selectOneRadio>
			      <!-- RadioButton -->
			      
			      <!-- GroupBox + RadioButtons - Ref.: http://www.primefaces.org/showcase/ui/fieldset.jsf -->
				      <p:fieldset id="groupBox" legend="Group Box" style="width:145px;">
				      	<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">	
					    	<p:selectOneRadio id="optionsGroupBox" layout="pageDirection" >  
					          <f:selectItem itemLabel="Option 1" itemValue="1" />  
					          <f:selectItem itemLabel="Option 2" itemValue="2" />  
					          <f:selectItem itemLabel="Option 3" itemValue="3" />  
					      	</p:selectOneRadio>
				      	</h:panelGrid>
				      </p:fieldset>      
			      <!-- Fim GroupBox -->
			
			      <!-- CheckBox - Ref.: http://www.primefaces.org/showcase/ui/selectManyCheckbox.jsf -->  
			      <h3>CheckBox</h3>      	
			      	<p:selectManyCheckbox layout="pageDirection"> 
			      		<f:selectItem itemLabel="Option 1" itemValue="Option 1" />
			   		</p:selectManyCheckbox>      	      	
			   	  <!-- Fim CheckBox -->
			   	  
			   	  <!-- Select - Ref.: http://www.primefaces.org/showcase/ui/selectOneMenu.jsf -->
			   	  <h3>Select</h3>
			   	  <p:selectOneMenu>
			  	  		<f:selectItem itemLabel="Select One" itemValue="" />
			   	  		<f:selectItem itemLabel="1" itemValue="1" />
			   	  		<f:selectItem itemLabel="2" itemValue="2" />
			   	  		<f:selectItem itemLabel="3" itemValue="3" />
			 	  </p:selectOneMenu>
			 	  <!-- Fim Select -->
			 	  
			 	  <!-- Lista - Ref.: http://www.primefaces.org/showcase/ui/dataListUnordered.jsf -->
			 	  <h3>Lista</h3>
			 	  <p:panel header="lista" toggleable="true" closable="true" toggleSpeed="500" closeSpeed="2000" style="width:300px; padding: 0px; border: 0px;"> 	  
			 	  <p:dataList value="#{table.carsSmall}" var="car" itemType="disc"> 	  		
			   	  		#{car.manufacturer}, #{car.year} 			
			 	  </p:dataList>
			 	  </p:panel>
			 	  <!-- Fim Lista -->
			 	  
			 	  <!-- InputTextArea - Ref.: http://www.primefaces.org/showcase/ui/inputTextarea.jsf -->
			 	  <h3>TextArea</h3>
			 	  <p:inputTextarea rows="6" cols="33" />
			 	  
			 	  
			 	  <!-- DataTable - Ref.: http://www.primefaces.org/showcase/ui/datatableBasic.jsf -->
			 	  <h3>Tabela</h3>	 
			 	  <p:dataTable id="basic" var="car" value="#{table.carsSmall}" style="width:300px;" >
				        <p:column id="modelHeader">
				            <f:facet name="header">
				                    Model
				            </f:facet>
				            <h:outputText value="#{car.model}" />
				        </p:column>
				
				        <p:column>
				            <f:facet name="header">
				                    Year
				            </f:facet>
				            <h:outputText value="#{car.year}" />
				        </p:column>	
				    </p:dataTable>
				    <!-- Fim DataTable -->
				    
				    
				    <!-- Tree - Ref.: http://www.primefaces.org/showcase/ui/tree.jsf -->
				    <h3>Árvore</h3>	    
			 	  	<p:tree value="#{treeBean.root}" var="node" id="tree">
			 	  	    <p:treeNode id="treeNode">
				            <h:outputText value="#{node}" id="lblNode"/>
				        </p:treeNode>
				    </p:tree>
					<!-- Fim Tree -->	
</html>